.xButton {
  margin: 5px;
  box-sizing: border-box /*mobile border以内的设置都是width height  传统只是内容的*/;
  display: inline-block;
  padding: 6px 1em;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.xButton.primary {
  background-color: #09f;
}
.xButton.circle {
  border-radius: 1.5em;
}
.xButton.warning {
  background-color: #f90;
}
.xButton.block {
  display: block;
}
.ripple {
  position: relative;
}
.ripple::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  background-image: radial-gradient(circle, #fff 10%, transparent 11%);
  background-position: 50%;
  transform: scale(12);
  transition: transform 0.6s, opacity 0.6s;
  opacity: 0;
}
.ripple:active::after {
  opacity: 1;
  transform: scale(0);
  transition: 0s;
}
